<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="Steper Kuo">
	<title>PreLoader: imageAnimate</title>

	<!-- Favicons -->
	<link rel="apple-touch-icon" sizes="152x152" href="../../assets/img/apple-icon-152x152.png">
	<link rel="icon" type="image/png" sizes="16x16" href="../../assets/img/favicon-16x16.png">

	<!-- Style custom *** CSS -->
	<style data-toggle="previewCode" data-target="#demoWrap" type="text/css">
		/* Demo's CSS here */

	</style>

	<!--Jquery.js, HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->

</head>
<body>

<!-- Script Preload code *** JS -->
<!--<script src="https://gyx8899.github.io/YX-WebThemeKit/fn-pre-loader/preLoader.min.js?type=split-ssc"></script>-->
<script src="../preLoader.min.js"></script>

<main>

	<!-- Demos -->
	<section id="demos">
		<div class="row">
			<div id="demoWrap" class="large-12 columns">
				<h3 id="overview">Overview</h3>
				<div data-toggle="previewCode" data-target="#demoWrap">
					<!--Demo's html here-->
					<a href="index.html?load=0">
						<img src="loading-dot-circle-rotate.svg" alt="loading-dot-circle-rotate">
					</a>
					<a href="index.html?load=1">
						<img src="loading-pacman.gif" alt="loading-pacman">
					</a>
					<a href="index.html?load=2">
						<img src="loading-three-dot-scaling.gif" alt="loading-three-dot-scaling">
					</a>
				</div>
				<!--Introduction here-->
				<p>Click the images above to see the effect.</p>
			</div>
		</div>
	</section>
</main>

<!-- Script Common *** JS -->
<script src="https://gyx8899.github.io/YX-JS-ToolKit/dist/assets/js/common.min.js"></script>
<!--<script src="../../assets/js/common.js"></script>-->

<!-- Script Config *** JS -->
<!--<script src="https://gyx8899.github.io/YX-WebThemeKit/assets/js/yx-theme-config.min.js"></script>-->
<script src="../../assets/js/yx-theme-config.js"></script>

<!-- Script Demo *** JS -->
<script data-toggle="previewCode" data-target="#demoWrap" type="text/javascript">
	// Demo's JS here
	document.onreadystatechange = function () {
		console.log(new Date().toLocaleTimeString() + " 44 " + document.body);
		console.log(new Date().toLocaleTimeString() + " 44 " + document.readyState);
	};
	var loadingImages = ['loading-dot-circle-rotate.svg', 'loading-pacman.gif', 'loading-three-dot-scaling.gif'];
	var imageIndex = parseInt(getQueryParam('load') || 0, 10);
	var imageSelected = loadingImages[imageIndex];
	// Instance PreLoader immediately
	new PreLoader({
		imageAnimate: true,
		imageAnimateInfo: {
			src: imageSelected
		}
	});

	function getQueryParam(variable)
	{
		var query = window.location.search.substring(1);
		var vars = query.split("&");
		for (var i = 0; i < vars.length; i++)
		{
			var pair = vars[i].split("=");
			if (pair[0] === variable)
			{
				return pair[1];
			}
		}
		return (false);
	}
</script>
</body>
</html>